{% extends "base.html" %}

{% block title %}{% cache 60*5, project_id | string(), release_id | string() if release_id else '', 'title' -%}
{%     set project = project_for(project_id) -%}
{%     set release = release_for(release_id) if release_id else None -%}
{{     project.title }}{% if release and release.version %} - {{ release.version }}{% endif -%}
{% endcache -%}{% endblock title -%}

{%- block metas %}
  {% cache 60*5, 'twitter_card', project_id | string(), release_id | string() if release_id else '' %}
    {{ super() }}
    {% set project = project_for(project_id) -%}
    {% set release = release_for(release_id) if release_id else None -%}
      <meta name="description" content="{{ project.summary_html_text }}" />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:site" content="@pygame_org" />
      <meta name="twitter:creator" content="@pygame_org" />
      {% if release -%}
        <meta property="og:url" content="{{ url_for('project.release', project_id=project.id, release_id=release.id, _external=True) }}" />
      {% else %}
        <meta property="og:url" content="{{ url_for('project.view', project_id=project.id, _external=True) }}" />
      {% endif %}
      <meta property="og:title" content="{{ project.title }}{% if release and release.version %} - {{ release.version }}{% endif %}" />
      <meta property="og:description" content="{{ project.summary_html_text }}" />
    {% set thumb_img = project.image_thumb(400,400) -%}
    {% if thumb_img -%}
      {% set base_url = url_for('static', filename='', _external=True).replace('/static/', '') -%}
      <meta property="og:image" content="{{ base_url }}{{ thumb_img }}" />
    {% endif %}

  {% endcache %}
{%- endblock metas %}

{% block content %}
  {% cache 60*5, project_id | string(), release_id | string() if release_id else '' %}
    {% set project = project_for(project_id) %}
    {% set release = release_for(release_id) if release_id else None %}

    {# So images in description are shown the full width. #}
    <style>
    .row.description img, .row.screenshot img {
      max-width: 100%;
    }
    </style>

    <div class="row">
      <div class="col-md-10">
        <h1>{{ project.title }}{% if release and release.version %} - {{ release.version }}{% endif %}</h1>
        <p class="lead">{{ project.summary_html|safe }}</p>
      </div>
      <div class="col-md-2">
        <img src="{{ project.user.email | gravatar }}">
        <br>
        {{ project.user.title }}
        <br>
        ({{ project.user.name }})
      </div>
    </div>

    <div class="row description">
      <div class="col-md-12">
        {{ project.description_html|safe }}
      </div>
    </div>

    <h3>Changes</h3>
    {% if release %}
      <div class="row description">
        <div class="col-md-12">
          {{ release.description_html|safe }}
        </div>
      </div>
    {% endif %}

    <div class="row">
      <div class="col-md-6">
        {% set thumb_img = project.image_thumb(400,400) %}
        {% if thumb_img %}
            <img class="img-responsive" src="{{ thumb_img }}">
        {% endif %}
      </div>
      <div class="col-md-6">
        {% for value, count, size in project.tag_counts %}
          <a href='/tags/{{value}}' class="btn btn-default" role="button">{{value}} <span class="badge">{{ count }}</span></a>
        {% endfor %}
        
        {% if project.youtube_trailer and project.youtube_trailer_embed %}
          {# Make the youtube embed responsive. #}
          <style>
            .embed-container {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
              overflow: hidden;
              max-width: 100%;
              margin-top: 20px;
            }
            .embed-container iframe, .embed-container object, .embed-container embed {
              position: absolute; top: 0; left: 0;
              width: 100%;
              height: 100%;
            }
          </style>
          <div class="embed-container">
            <iframe src="{{ project.youtube_trailer_embed }}" allowfullscreen="" frameborder="0"></iframe>
          </div>
        {% endif %}
      </div>
    </div>


    <h3>Links</h3>
    <div>
      <dl>
        <dt>Home Page</dt>
        <dd><a href="{{ project.uri }}">{{ project.uri }}</a></dd>
        {% if release %}
          {% if release.srcuri %}
            <dt>Source</dt>
            <dd><a href="{{ release.srcuri }}">{{ release.srcuri }}</a></dd>
          {% endif %}
          {% if release.winuri %}
            <dt>Windows</dt>
            <dd><a href="{{ release.winuri }}">{{ release.winuri }}</a></dd>
          {% endif %}
          {% if release.macuri %}
            <dt>Mac</dt>
            <dd><a href="{{ release.macuri }}">{{ release.macuri }}</a></dd>
          {% endif %}
          {% if project.github_repo %}
            <dt>Github repo</dt>
            <dd><a href="{{ project.github_repo }}">{{ project.github_repo }}</a></dd>
          {% endif %}
          {% if project.patreon %}
            <dt>Support this project on Patreon</dt>
            <dd><a href="{{ project.patreon }}">{{ project.patreon }}</a></dd>
          {% endif %}
        {% endif %}
      </dl>
    </div>

    <h3>Releases</h3>

    {% for arelease in project.releases %}
      <p>
        <a href="{{ url_for('project.release', project_id=project.id, release_id=arelease.id) }}">{{ project.title }} {{ arelease.version }} &mdash; {{ arelease.datetimeon.strftime('%-d %b, %Y') }}</a>
      </p>
    {% endfor %}


    <h3>Pygame.org account Comments</h3>

    {#
          <p>Please leave a comment.</p>

          <form method="post">
            <p><i>Worst</i> &nbsp; <input name="rating" value="1" type="radio">1 &nbsp;<input name="rating" value="2" type="radio">2 &nbsp; <input name="rating" value="3" type="radio">3 &nbsp; <input name="rating" value="4" type="radio">4 &nbsp; <input name="rating" value="5" type="radio">5 &nbsp; <i>Best</i><br><textarea name="content" rows="5" cols="80"></textarea><br><input value="Add Comment" type="submit"></p>
          </form>
    #}

    {% set comment_url = url_for('project.new_comment', project_id=project_id) %}
    {% set comment_form = commentform %}
    {% set comments = comments_for(project_id) %}
    {% set post = comments[0] if comments else None %}

    {% from "comment/_macros.html" import post_toplevel, post_reply_part %}
    {{ post_reply_part(post, comment_url, commentform, True) }}
    {{ post_toplevel(comments, comment_url, commentform) }}

    {# Disable old comments until fixed.
    <table class="comments">
      <tbody>
      {% for comment in project.comments %}
        <tr>
          <th align="left">
            {{ comment.datetimeon.strftime('%Y-%m-%d %H:%M') }} - {{ comment.user.title }} - nickname: ({{ comment.user.title }}) - {{ comment.rating }}/5
          </th>
        </tr>
        <tr>
          <td>
            <div>{{ comment.content }}</div><div><a href="?action=comments_delete&amp;id={{ comment.id }}">delete</a></div>
          </td>
        </tr>
      {%endfor %}
      </tbody>
    </table>
    #}

  {% endcache %}
{% endblock %}